<template>
  <div class="wrapper">
      <p>{{ title }}</p>
      <p>
          <span>
              <input type="text" v-model="course.name" >
          </span>
          <span>{{ course.name }}</span>
      </p>
      <p>
          <span>
              <input type="number" v-model="course.credit" >
          </span>
          <span>{{ course.credit }}</span>
      </p>
      <p>
          <span>
              <input type="number" v-model="number" >
          </span>
          <span>{{ number }}</span>
      </p>
      <div>
          <!-- 具名插槽 -->
          <slot name="footer"></slot>
      </div>
  </div>
</template>

<script>
export default {
    name: 'Course'
}
</script>

<!-- setup() 语法糖 -->
<script setup>
// 导入支持函数
import { ref , reactive , defineProps , defineExpose , useAttrs , useSlots } from 'vue' ;

// 定义 prop attribute
let props = defineProps({
  title: { type: String , required: true }
});

// 将对象处理成响应式
let course = reactive( { name: 'C++程序设计' , credit: 4 } );

// 将数据处理成响应式
let number = ref( 35 );

// 获取 non-prop attribute ( 获取 非Prop attribute )
let attrs = useAttrs();
console.log( `\t attrs: ` , attrs );

// 获取插槽
let slots = useSlots();
console.log( `\t slots: ` , slots );

// 对 template 暴露成员
defineExpose({
    props,
    course,
    number
});

</script>

<style scoped>
.wrapper {
    margin: 15px ;
    border: 1px solid green ;
    padding: 10px ;
}
.wrapper>p {
    display: flex ;
    margin: 5px 0 ;
}

.wrapper>p span {
    flex-basis: 300px ;
}
</style>